<template>
  <div>
    <el-form
      ref="auditForm"
      :model="auditForm"
      :rules="rules"
      label-width="110px"
      class="form-mb20"
      :label-position="isPhoneType ? 'top' : 'right'"
    >
      <el-divider content-position="left">
        <div class="m-title">填报信息：</div>
      </el-divider>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="展区名称：">
            {{ detailForm.deptName }}
          </el-form-item>
        </el-col>
      </el-row>

      <div class="dashed"></div>

      <el-divider content-position="left">
        <div class="m-title">个人信息：</div>
      </el-divider>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="姓名：">
            {{ detailForm.name }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别：">
            <span v-if="detailForm.sex === null">-</span>
            <dict-tag
              v-else
              :options="dict.type.sys_user_sex"
              :value="detailForm.sex"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="国籍：">
            {{ detailForm.country || "-" }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件类型：">
            {{ detailForm.cardType || "-" }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件号：">
            {{ detailForm.idCard || "-" }}
          </el-form-item>
        </el-col>
        <el-col :span="isPhoneType ? 24 : 12">
          <el-form-item label="户籍地址：">
            {{ detailForm.address || "-" }}
          </el-form-item>
        </el-col>
        <el-col :span="isPhoneType ? 24 : 12">
          <el-form-item label="单位：">
            {{ detailForm.comName || "-" }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职务：">
            {{ detailForm.post || "-" }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话：">
            {{ detailForm.mobile || "-" }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请证件类型：">
            {{ detailForm.applyCardType || "-" }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="签证地：">
            {{ detailForm.placeArea || "-" }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人员照片：">
            <div
              v-if="detailForm.avgUrl"
              class="demo-image__preview table-avg fl"
            >
              <el-image
                :src="detailForm.avgUrl"
                :preview-src-list="[detailForm.avgUrl]"
              >
              </el-image>
            </div>
            <span v-else>暂无图片</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="参展年限：">
            {{ detailForm.joinYear }}
          </el-form-item>
        </el-col>
      </el-row>

      <template
        v-if="detailForm.status === 0 && checkPermi(['system:apply:audit'])"
      >
        <el-form-item label="审核结果：" prop="auditStatus" key="auditStatus">
          <el-radio-group
            v-model="auditForm.auditStatus"
            @change="changeStatus"
          >
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="审核意见："
          :prop="auditForm.auditStatus != 1 ? 'auditRemark' : undefined"
          ref="remarkVoid"
          key="auditRemark"
        >
          <el-input
            v-model="auditForm.auditRemark"
            type="textarea"
            placeholder="请输入内容"
            :rows="4"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item label="审核结果：">
          <span v-if="detailForm.status === 0" class="gray">待审核</span>
          <span v-if="detailForm.status === 1" class="green">市级通过</span>
          <span v-if="detailForm.status === 2" class="red">市级驳回</span>
          <span v-if="detailForm.status === 3" class="green">省级通过</span>
          <span v-if="detailForm.status === 4" class="red">省级驳回</span>
        </el-form-item>
        <el-form-item label="审核意见：">
          <span v-if="detailForm.status === 0"> -</span>
          <span v-if="detailForm.status === 1 || detailForm.status === 2">
            {{ detailForm.cityAuditInfo || "-" }}
          </span>
          <span v-if="detailForm.status === 3 || detailForm.status === 4">
            {{ detailForm.auditInfo || "-" }}
          </span>
        </el-form-item>
        <el-form-item label="审核人：">
          <span v-if="detailForm.status === 0"> -</span>
          <span v-if="detailForm.status === 1 || detailForm.status === 2">
            {{ detailForm.cityAudit || "-" }}
          </span>
          <span v-if="detailForm.status === 3 || detailForm.status === 4">
            {{ detailForm.auditBy || "-" }}
          </span>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
import { checkPermi } from "@/utils/permission";
export default {
  props: {
    detailForm: Object,
    isPhoneType: Boolean,
  },
  dicts: ["sys_user_sex"],
  data() {
    return {
      auditForm: {},
      rules: {
        auditStatus: [
          { required: true, message: "请选择审核结果", trigger: "change" },
        ],
        auditRemark: [
          { required: true, message: "请输入审核意见", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    checkPermi,
    rest() {
      this.auditForm = {
        auditStatus: undefined,
        auditRemark: undefined,
      };
      this.resetForm("auditForm");
    },
    // 校验
    setVali() {
      this.$refs["auditForm"].validate((valid) => {
        if (valid) {
          var param = {
            partId: this.detailForm.partId,
            auditStatus: this.auditForm.auditStatus,
            auditRemark: this.auditForm.auditRemark,
          };
          this.$emit("auditClick", param);
        }
      });
    },
    changeStatus() {
      this.$refs.remarkVoid.clearValidate();
    },
  },
};
</script>
